<div class="input-filter">
  <div class="input-filter-control">
    <input
      clrInput
      class="text-input"
      placeholder="{{ filters | filtertext }}"
      name="input"
      [(ngModel)]="inputValue"
      (keyup.enter)="onEnter()"
    />
    <clr-icon
      class="down-icon"
      (click)="toggleTagList()"
      shape="caret down"
    ></clr-icon>
  </div>
  <ng-container *ngIf="showTagList">
    <div class="input-filter-tags">
      <div *ngIf="filters?.length < 1" class="input-filter-empty">
        No current filters
      </div>
      <ng-container *ngIf="filters?.length > 0">
        <div class="input-filter-tags-list">
          <div
            class="label label-light-blue"
            *ngFor="let filter of filters; trackBy: identifyFilter"
          >
            {{ filter.key }}:{{ filter.value }}
            <clr-icon
              class="input-filter-tag-remove"
              shape="times"
              (click)="remove(filter)"
            ></clr-icon>
          </div>
        </div>
        <div class="clear-all" (click)="clearAllFilters()">clear all</div>
      </ng-container>
    </div>
  </ng-container>
</div>
